var pEle = document.querySelectorAll('.menu>p')
for (let i = 0; i < pEle.length; i++) {
    pEle[i].onclick = function () {
        for (let j = 0; j < pEle.length; j++) {
            pEle[j].classList.remove('active')
        }
        this.className = 'active'
    }
}
var bar = document.querySelector('.bar')
var B = echarts.init(bar)
var line = document.querySelector('.line')
var l = echarts.init(line)



B.setOption({

    title: { //图表的标题
        text: '每月收入',
        left: 'left',
    },
    legend: { //图例
        top: 10,
        right: 130
    },
    xAxis: {// X轴设置
        data: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'],
        type: 'category'

    },
    yAxis: [{ // 纵轴标尺固定
        type: 'value',
        scale: true,
        max: 5000,
        min: 0,
        splitNumber: 7,

    }],

    series: [
        {
            name: '当前每月收入',
            type: 'bar',
            barWidth: 15,
            // showBackground:true,
            // backgroundStyle: {
            //     // color: 'skyblue',
            //     borderRadius: 20, //背景圆角
            // },
            data: [2550, 1600, 1700, 3300, 4800, 3500, 1700, 2500, 2300, 1700, 3800, 1700]
        },
        {
            name: '同期每月收入',
            barWidth: 15,
            // showBackground:true,
            // backgroundStyle: {
            //     //color: '',
            //     borderRadius: 20, //背景圆角
            // },
            type: 'bar',
            data: [1600, 250, 300, 1700, 1700, 800, 300, 500, 2600, 2700, 3800, 1700]
        }
    ]
})


l.setOption({
    title: { //图表的标题
        text: '每年收入走势',
        left: 'left',
    },
    legend: { //图例
        top: 10,
        right: 120,
    },

    xAxis: { //x轴设置
        data: ['2000', '2010', '2011', '2012', '2013', '2014', '2015', '2016', '2017', '2018', '2019', '2020'],
        // type: 'value',
        splitLine:{
            show:true,
            lineStyle:{
                type:'solide',
            }
        }



    },
    yAxis: [{ // 纵轴标尺固定
        type: 'value',
        scale: true,
        max: 80,
        min: 20,
        splitNumber: 6,

    }],
    series: [
        {
            name: '每年收入走势',
            type: 'line',
            data: [50, 55, 60, 40, 45, 40, 65, 40, 68, 20, 72, 60],
            symbolSize: 5, //圆点大小
            symbol: 'circle',//圆点形状
            smooth: true, //是否平滑曲线显示
            // itemStyle: {
            //     normal: {
            // color: 'green', //折线颜色
            //         borderWidth: 2, //圆点的边框宽度
            //         borderColor: 'green', //圆点的边框颜色
            //         lineStyle: { width: 2 }, //折线的宽度
            //         shadowBlur: 1,
            //         shadowColor: 'green'
            //     }
            // }
        },
        {
            name: '每年同期收入走势',
            type: 'line',
            data: [48, 50, 52, 48, 40, 36, 65, 45, 58, 30, 72, 58],
            symbolSize: 5, //圆点大小
            symbol: 'circle',//圆点形状
            smooth: true, //是否平滑曲线显示
            // itemStyle: {
            //     normal: {
            // color: 'grey', //折线颜色
            //         borderWidth: 2, //圆点的边框宽度
            //         borderColor: 'skyblue', //圆点的边框颜色
            //         lineStyle: { width: 2 }, //折线的宽度
            //         shadowBlur: 1,
            //         shadowColor: 'skyblue'
            //     }
            // }
        },

    ]
})


var data = Mock.mock({
    "list|5": [
        {
            "id|+1": 1,
            "phone|10000000-99999999": 1,
            "email": "@email",
            "name": "@cname",
            "ingroup|+1": ["编辑组", "开发组", '测试组'],
            "isadmin|1": true,
            "status|1": true,

        }
    ]
})



render(data.list)

//渲染表格数据
function render(data) {
    var str = data.map((item, index) => {
        return `<tr>
                    <td>${item.id}</td>
                    <td>${item.phone}</td>
                    <td>黑色休闲裤</td>
                    <td>2019-05-01</td>
                    <td>完成</td>
                    <td>---------</td>
                </tr>`
    }).join('')
    document.querySelector('tbody').innerHTML = str;
}
